<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/buy.css">
  <link rel="stylesheet" href="./css/tabbar.css">
  <title>交易大厅</title>
</head>

<body>
<div class="Platform">
  <div class="container">
    <div class="p-header">
      <span>交易平台</span>
    </div>
    <div class="t-title">
      <span class="lefttitle">BHC币历史价格</span>
      <span class="righttitle">(2019年)</span>
    </div>
    <div id="echarts">
      <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
    </div>
    <div class="r-content">
      <div class="r-item r-title">
        <ul>
          <li>数量</li>
          <li>单价</li>
          <li>合计金额</li>
          <li>操作</li>

        </ul>
      </div>
      <div class="r-item">
        <ul>
          <li>120</li>
          <li>$0.66</li>
          <li>$79.20</li>
          <li>
            <button>卖给他</button>
          </li>
        </ul>
      </div>
      <div class="r-item">
        <ul>
          <li>120</li>
          <li>$0.66</li>
          <li>$79.20</li>
          <li>
            <button>卖给他</button>
          </li>
        </ul>
      </div>
      <div class="r-item">
        <ul>
          <li>120</li>
          <li>$0.66</li>
          <li>$79.20</li>
          <li>
            <button>卖给他</button>
          </li>
        </ul>
      </div>
      <div class="r-item">
        <ul>
          <li>120</li>
          <li>$0.66</li>
          <li>$79.20</li>
          <li>
            <button>卖给他</button>
          </li>
        </ul>
      </div>
      <div class="r-item">
        <ul>
          <li>120</li>
          <li>$0.66</li>
          <li>$79.20</li>
          <li>
            <button>卖给他</button>
          </li>
        </ul>
      </div>
      <div class="r-item">
        <ul>
          <li>120</li>
          <li>$0.66</li>
          <li>$79.20</li>
          <li>
            <button>卖给他</button>
          </li>
        </ul>
      </div>
      <div class="more">
        没有更多了
      </div>
    </div>
  </div>
</div>

<div class="TabBar">
  <router-link to="/home" class="TabBarItem">
    <div>
      <img src="./img/tb-1.png" alt/>
    </div>
    <div class="tabtext">首页</div>
  </router-link>

  <router-link to="/mine" class="TabBarItem">
    <div>
      <img src="./img/tb-2.png" alt/>
    </div>
    <div class="tabtext">我的矿机</div>
  </router-link>

  <router-link to="/buy" class="TabBarItem">
    <div>
      <img src="./img/tbActive-3.png" alt/>
    </div>
    <div class="tabtext tabtextActive">交易大厅</div>
  </router-link>

  <router-link to="/group" class="TabBarItem">
    <div>
      <img src="./img/tb-5.png" alt/>
    </div>
    <div class="tabtext">我的团队</div>
  </router-link>

  <router-link to="/member" class="TabBarItem">
    <div>
      <img src="./img/tb-4.png" alt/>
    </div>
    <div class="tabtext">会员中心</div>
  </router-link>

</div>

<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts-en.common.js"></script>
<script>


  var myChart = echarts.init(document.getElementById('echarts'));
  var option = {
    xAxis: {
      type: 'category',
      data: ['11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
      min: 0.24,
      splitNumber: 5,
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    series: [{
      data: [0.24, 0.25, 0.28, 0.25, 0.34],
      type: 'line',
      color: "#f8b551",
      symbolSize: 7,
      symbol: 'circle'
    }]
  }
  myChart.setOption(option);
</script>
</body>

</html>